<script setup lang="ts">
    import zhCN from 'ant-design-vue/es/locale/zh_CN'
    import enUS from 'ant-design-vue/es/locale/en_US'
    import { ConfigProvider } from 'ant-design-vue'

    import dayjs from 'dayjs'
    import 'dayjs/locale/zh-cn'
    import 'dayjs/locale/en'
    import { useSystemStore } from '@/store/modules/system'
    import { computed, ref, watch } from 'vue'
    import { useI18n } from 'vue-i18n'

    const antdMap = {
        'zh-CN': zhCN,
        'en-US': enUS
    }
    const dayjsMap = {
        'zh-CN': 'zh-cn',
        'en-US': 'en'
    }

    const systemStore = useSystemStore()
    const i18n = useI18n()

    // 国际化选项变化时，更新设置
    const locale = computed(() => {
        return antdMap[systemStore.currentLocale]
    })
    watch(
        () => systemStore.currentLocale,
        () => {
            i18n.locale.value = systemStore.currentLocale
            dayjs.locale(dayjsMap[systemStore.currentLocale])
        }
    )
    // 初始化国际化
    i18n.locale.value = systemStore.currentLocale

    const antPrefix = ref<string>(import.meta.env.VITE_ANTD_PREFIX)
    ConfigProvider.config({
        prefixCls: antPrefix
    })
</script>

<template>
    <div style="height: 0">
        <vue3-progress-bar />
    </div>
    <a-config-provider :locale="locale" :prefixCls="antPrefix">
        <router-view v-slot="{ Component }">
            <transition name="fade">
                <component :is="Component" />
            </transition>
        </router-view>
    </a-config-provider>
</template>
